<template>
    <section>
        <el-col :span="24">
            <el-form inline>
                <el-form-item>
                    <el-input v-model.trim="form.type_no" placeholder="商品编码" size="small" style="width: 130px" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model.trim="form.product_code" placeholder="规格编码" size="small" style="width: 130px" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model.trim="form.type_name" placeholder="款名称" size="small" style="width: 130px" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select size="small" v-model="form.is_subject" style="width: 120px">
                        <el-option value="kz" label="十三余"></el-option>
                        <el-option value="mz" label="十三余(童装)"></el-option>
                        <el-option value="yx" label="有香"></el-option>
                        <el-option value="xm" label="一弦一木"></el-option>
                        <el-option value="js" label="锦瑟"></el-option>
                        <el-option value="qyx" label="七月夕"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="el-icon-search" @click="searchBtn" size="small" :loading="btnLoading">
                        查询
                    </el-button>
                    <el-button type="primary" class="el-icon-pie-chart" @click="proportionVisible=true;proportionList=[];typeNo=''" size="small" :loading="btnLoading"
                        :disabled="!nodeActions.includes('edit')">
                        批量平台比例
                    </el-button>
                    <el-button type="primary" class="el-icon-date" @click="batchVisible=true;typeNo='';arrivaldate='';arrivaldate_title=''" size="small" :loading="btnLoading"
                        :disabled="!nodeActions.includes('edit')">
                        批量预计到货期
                    </el-button>
                    <el-button type="text" class="el-icon-download" @click="getExcelFileBtn" size="small" :loading="downloading" :disabled="!nodeActions.includes('export')">
                        导出
                    </el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="24">
            <el-table :data="data" style="width: 100%" :max-height="tableHeight" v-loading="loading" size="small" :summary-method="getSummaries" show-summary>
                <el-table-column label="商品编码" align="center" prop="type_no" width="135"></el-table-column>
                <el-table-column label="规格编码" align="center" prop="product_code" width="135"></el-table-column>
                <el-table-column label="款名" align="center" prop="product_name" show-overflow-tooltip></el-table-column>
                <el-table-column label="部件" align="center" prop="a_parts" show-overflow-tooltip></el-table-column>
                <el-table-column label="图片" align="center" prop="img" width="50">
                    <template slot-scope="{ row }">
                        <el-image :src="row.img" fit="contain" :preview-src-list="[row.img]">
                            <div slot="error" class="image-slot">
                                <svg t="1718681716906" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2623" width="20" height="20"><path d="M400.696 268.795c-17.249 0-31.233 13.986-31.233 31.233v30.471c0 17.249 13.986 31.233 31.233 31.233s31.233-13.986 31.233-31.233v-30.471c0-17.249-13.985-31.233-31.233-31.233z" fill="#999999" p-id="2624"></path><path d="M623.649 361.734c17.249 0 31.234-13.986 31.234-31.233v-30.471c0-17.249-13.986-31.233-31.234-31.233s-31.233 13.986-31.233 31.233v30.471c-0.001 17.248 13.985 31.233 31.233 31.233z" fill="#999999" p-id="2625"></path><path d="M438.295 388.804c-14.656 9.104-19.155 28.362-10.050 43.013 11.209 18.047 41.976 48.59 86.157 48.59 43.958 0 75.1-30.313 86.574-48.223 9.303-14.529 5.068-33.847-9.455-43.15-14.539-9.298-33.852-5.068-43.15 9.455-0.122 0.199-13.38 19.45-33.969 19.45-20.009 0-32.444-18.128-33.278-19.373-9.166-14.423-28.28-18.805-42.829-9.761z" fill="#999999" p-id="2626"></path><path d="M824.508503 116.690676 571.592236 116.690676c-17.248849 0-31.233352 13.985526-31.233352 31.233352s13.985526 31.233352 31.233352 31.233352l252.916267 0c40.181141 0 72.878844 32.692586 72.878844 72.878844l0 396.966057-189.334159-165.29465c-12.20088-10.655687-30.517037-10.207479-42.173518 0.9967L468.578048 674.16231 309.521472 517.519714c-11.895935-11.70253-30.903847-12.002358-43.154869-0.645706L126.957507 646.163629l0-394.126382c0-40.186258 32.692586-72.878844 72.878844-72.878844l252.916267 0c17.248849 0 31.233352-13.985526 31.233352-31.233352S470.000444 116.690676 452.751594 116.690676L199.836351 116.690676c-74.632791 0-135.346571 60.71378-135.346571 135.346571l0 520.56405c0 74.632791 60.71378 135.346571 135.346571 135.346571l252.916267 0c17.248849 0 31.233352-13.985526 31.233352-31.233352s-13.985526-31.233352-31.233352-31.233352L199.836351 845.481164c-40.186258 0-72.878844-32.692586-72.878844-72.878844l0-41.23924 160.003134-148.385539 159.428036 157.007917c12.048407 11.865235 31.361265 11.981892 43.546795 0.274246l198.576661-190.68697 208.876238 182.346001 0 40.683585c0 40.186258-32.697703 72.878844-72.878844 72.878844L571.592236 845.481164c-17.248849 0-31.233352 13.985526-31.233352 31.233352s13.985526 31.233352 31.233352 31.233352l252.916267 0c74.627674 0 135.346571-60.71378 135.346571-135.346571L959.855074 252.037247C959.855074 177.404456 899.136178 116.690676 824.508503 116.690676z" fill="#999999" p-id="2627"></path></svg>
                            </div>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column label="淘宝(预售)/现货" align="center" prop="tb" width="110">
                    <template slot-scope="{ row }">
                        <div><span style="color: #ffca42; font-size: 16px">{{row.tb.yushou }}</span> / <span style="color: #71d5a1; font-size: 16px">{{row.tb.xianhu}}</span></div>
                    </template>
                </el-table-column>
                <el-table-column label="天猫（预售/现货）" align="center" prop="tm" width="120">
                    <template slot-scope="{ row }">
                        <div><span style="color: #ffca42; font-size: 16px">{{row.tm.yushou }}</span> / <span style="color: #71d5a1; font-size: 16px">{{row.tm.xianhu}}</span></div>
                    </template>
                </el-table-column>
                <el-table-column label="抖音（预售/现货）" align="center" prop="dy" width="120">
                    <template slot-scope="{ row }">
                        <div><span style="color: #ffca42; font-size: 16px">{{row.dy.yushou}}</span> / <span style="color: #71d5a1; font-size: 16px">{{row.dy.xianhu}}</span></div>
                    </template>
                </el-table-column>
                <el-table-column label="报次数" align="center" prop="bao_number" width="80"></el-table-column>
                <el-table-column label="留存" align="center" prop="liu" width="80" >
                    <template slot-scope="{ row }">
                        <div>{{ row.liu.yuliu }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="总数" align="center" prop="count" width="80"></el-table-column>
                <el-table-column label="预售总数/现货总数" align="center" prop="xianhu" width="120">
                    <template slot-scope="{ row }">
                        {{ row.yushou || 0 }}/{{ row.xianhu || 0 }}
                    </template>
                </el-table-column>
                <el-table-column label="预计到货日期" align="center" prop="arrivaldate" width="100"></el-table-column>
                <el-table-column label="预计到货天数" align="center" prop="arrivaldate_title" width="100"></el-table-column>
                <el-table-column label="创建时间" align="center" prop="createtime" width="132"></el-table-column>
            </el-table>
            <!--翻页栏-->
            <div style="margin-top: 4px;overflow: hidden;float: right;">
                <Page :total="total" :current="page" :page-size="limit" show-total @on-change="pageChange"></Page>
            </div>
        </el-col>

        <!--平台比例分配-->
        <el-dialog title="批量平台比例" :visible.sync="proportionVisible" :close-on-click-modal="false" width="400px">
            <el-form label-position="left" label-width="60px">
                <el-form-item label="款号：">
                    <el-input v-model.trim="typeNo" placeholder="请输入款号" @change="proportionBtn" style="width: 80%" size="small"></el-input>
                </el-form-item>
                <el-form-item v-if="proportionList.length>0" v-for="(item,index) in proportionList" :key="index" :label="item.title+'：'">
                    <el-input size="small" v-model.trim="item.proportion" type="number" :min="1" :max="100" style="width: 80%"></el-input>&nbsp;%
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="proportionVisible=false" size="small" plain>取 消</el-button>
                <el-button type="primary" @click="setProportionBtn" size="small" :loading="saveLoading">确 定</el-button>
            </div>
        </el-dialog>

        <!--批量预计到货期-->
        <el-dialog title="批量预计到货期" :visible.sync="batchVisible" :close-on-click-modal="false" width="380px">
            <el-form label-width="90px">
                <el-form-item label="商品编码：">
                    <el-input v-model.trim="typeNo" placeholder="商品编码" @change="proportionBtn" size="small"></el-input>
                </el-form-item>
                <el-form-item label="到货日期：">
                    <el-date-picker size="small" v-model="arrivaldate" type="date" placeholder="预计到货日期" value-format="yyyy-MM-dd" style="width: 100%"></el-date-picker>
                </el-form-item>
                <el-form-item label="到货天数：">
                    <el-input size="small" v-model="arrivaldate_title" placeholder="预计到货天数"></el-input>
                </el-form-item>
                <el-form-item style="margin-top: 0px;">
                    <el-upload action="/api/tool/fileImport" :show-file-list="false" style="display: inline"
                               :headers="uploadHeaders"
                               :data="uploadData"
                               :on-success="(res)=>uploadSuccessHandle(res)"
                               :before-upload="beforeUpload">
                        <el-button class="el-icon-upload2" type="primary" size="mini" :disabled="!nodeActions.includes('import')">批量导入</el-button>
                    </el-upload>
                    &nbsp;
                    <el-button type="text" size="mini" @click="downloadFile('到货期导入模板.xlsx')">
                        <svg style="vertical-align: sub;" t="1720518191914" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5101" width="20" height="20"><path d="M901.851653 926.484607a48.255937 48.255937 0 0 1-14.274541 34.442195 48.844737 48.844737 0 0 1-34.457555 14.279661H170.419644a48.220097 48.220097 0 0 1-34.457555-14.279661 48.844737 48.844737 0 0 1-14.279662-34.442195V48.846068a48.317377 48.317377 0 0 1 14.279662-34.467795A48.844737 48.844737 0 0 1 170.419644 0.001331h418.800096a48.742337 48.742337 0 0 1 34.662355 14.131182l263.858857 263.910057a48.844737 48.844737 0 0 1 14.110701 34.667475z" fill="#EBECF0" p-id="5102"></path><path d="M901.851653 926.484607v48.767936a48.317377 48.317377 0 0 1-14.274541 34.467796 48.844737 48.844737 0 0 1-34.457555 14.279661H170.419644a48.844737 48.844737 0 0 1-48.788417-48.844737v-48.721856a48.204737 48.204737 0 0 0 14.279662 34.442195 48.844737 48.844737 0 0 0 34.457555 14.279661h682.648713a48.844737 48.844737 0 0 0 48.773056-48.783296z" fill="#C1C7D0" p-id="5103"></path><path d="M24.167034 536.423034h975.153932v243.849923a48.921536 48.921536 0 0 1-48.721856 48.844736H73.011771a48.342977 48.342977 0 0 1-34.467796-14.274541 48.844737 48.844737 0 0 1-14.376941-34.570195z" fill="#0AC905" p-id="5104"></path><path d="M121.733627 536.412794V438.856441L24.167034 536.412794z m780.118026 0l0.926719-97.556353 97.039234 97.556353z" fill="#168E2D" p-id="5105"></path><path d="M901.851653 312.628125v6.860791h-263.833257a48.844737 48.844737 0 0 1-48.844736-48.844737V0.001331a48.732097 48.732097 0 0 1 34.662355 14.115822l264.268456 263.751337a49.459136 49.459136 0 0 1 13.701102 34.754515z" fill="#C1C7D0" p-id="5106"></path><path d="M265.190721 764.037458H136.346088v-153.94284h126.335836v35.978193H187.382182v21.749732h63.590317v35.973073h-63.590317v24.268769h77.808539zM358.05716 720.532875l-25.098207 43.504583H276.065587l54.384569-80.322456-49.366976-73.620384h56.893366l21.754852 39.321549 22.589411-39.321549h56.888246L386.508963 683.725242l52.705212 80.317336H382.320809zM599.843726 668.662222h-47.682498q-3.353596-24.268768-27.612124-25.103327-27.612124 0.839679-28.446683 45.178821 0 41.845706 30.120921 41.830345 22.584291 0 25.937886-25.932766h48.522177q-8.376309 59.417523-73.625505 61.91096-78.648218-2.508797-81.151894-79.482777 4.177915-76.124061 76.96886-81.151894 69.43735 0.839679 76.96886 62.750638zM752.112328 764.037458h-128.844633v-153.94284h126.335836v35.978193H674.303789v21.749732h63.590317v35.973073H674.303789v24.268769h77.808539zM897.694219 764.037458H777.215655v-153.94284h51.036094v117.964647h69.44247z" fill="#FFFFFF" p-id="5107"></path></svg>
                        导入模板
                    </el-button>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="batchVisible=false" size="small" plain>退 出</el-button>
                <el-button type="primary" @click="setArrivaldateBtn" size="small" :loading="saveLoading">确 定</el-button>

            </div>
        </el-dialog>

        <!--导出-->
        <el-dialog title="导出管理" :visible.sync="exportVisible" :close-on-click-modal="false" :close-on-press-escape="false" :before-close="exportCloseBtn" width="800px">
            <el-table :data="excelFile" style="width: 100%" height="400px" size="small">
                <el-table-column type="index" width="50"></el-table-column>
                <el-table-column prop="create_user" label="创建人" width="90"></el-table-column>
                <el-table-column prop="create_time" label="导出时间" width="135"></el-table-column>
                <el-table-column prop="name" label="文件" width="220"></el-table-column>
                <el-table-column prop="status" label="操作">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status == 0 && exportCache.process < 100">
                            <el-progress :text-inside="true" :stroke-width="16" status="success" :percentage="exportCache.process"></el-progress>
                        </span>
                        <span v-else>
                            <el-button type="text" class="el-icon-download" size="small" @click="downloadBtn(scope.row.name)">&nbsp;下载</el-button>
                        </span>
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer">
                <el-button @click="exportCloseBtn" size="small" plain>退 出</el-button>
                <el-button type="primary" @click="exportDataBtn" size="small" :loading="saveLoading"
                    :disabled="exportCache.file && exportCache.process<100">添加计划</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
import {
    inventoryExportCache,
    inventoryExcelList, inventoryExportData,
    inventoryList,
    inventoryProportion,
    inventorySetArrivalDate,
    inventorySetProportion
} from "@/api/om/inventory";
import {getToken} from "@/libs/util";

export default {
    name: "om_inventory",
    data() {
        return {
            tableHeight: window.innerHeight - 210,
            selectIndex: 0,
            btnLoading: false,
            loading: false,
            page: 1,
            limit: 20,
            total: 0,
            data: [],
            user: {},
            nodeActions: [],

            form: {type_no: "", product_code: "", type_name: "", is_subject: "kz"},
            proportionVisible: false,
            typeNo: "",
            proportionList:[],
            saveLoading: false,
            batchVisible: false,
            arrivaldate: "",//预计到货日期
            arrivaldate_title: "",//预计到货天数

            //导出
            downloading: false,
            excelFile: [],
            exportCache: {},
            exportVisible: false,
            exportTimeout: null,

            uploadHeaders: {},
            uploadData:{type: 'om_inventory', disk: 'excel'},
        }
    },
    created() {
        this.user = this.$store.getters.user;
        this.nodeActions = this.user.node_actions[this.$route.meta.id] ? this.user.node_actions[this.$route.meta.id] : [];
    },
    methods: {
        //搜索按钮
        searchBtn() {
            this.page = 1;
            this.getData();
        },
        //翻页
        pageChange(page) {
            this.page = page;
            this.getData();
        },
        //获取数据
        getData() {
            let param = {
                page: this.page,
                limit: this.limit,
            };
            param = Object.assign(param, this.form);
            this.loading = true;
            inventoryList(param).then((res) => {
                this.loading = false;
                this.total = res.data.total;
                this.data = res.data.data;
            }).catch(() => {
                this.loading = false;
            });
        },
        //合计
        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = "合计";
                    return;
                }
                const values = data.map((item) => Number(item[column.property]));
                if (!values.every((value) => isNaN(value)) && (["总数"].includes(column.label))) {
                    sums[index] = values.reduce((prev, curr) => {
                        const value = Number(curr);
                        if (!isNaN(value)) {
                            return prev + curr;
                        } else {
                            return prev;
                        }
                    }, 0);
                    sums[index] = sums[index];
                } else {
                    sums[index] = "";
                }
            });
            return sums;
        },
        proportionBtn(){
            if(!this.typeNo){
                return;
            }
            inventoryProportion({type_no: this.typeNo}).then((res) =>{
                if(res.code===0){
                    this.proportionList = res.data;
                }else{
                    this.$message.error(res.msg);
                }
            })
        },
        setProportionBtn(){
            this.saveLoading = true;
            inventorySetProportion({data: JSON.stringify(this.proportionList)}).then((res) => {
                this.saveLoading = false;
                if(res.code === 0){
                    this.$message.success("设置成功");
                    this.proportionVisible = false;
                    this.getData();
                }else{
                    this.$message.error(res.msg);
                }
            }).catch(()=>{
                this.saveLoading = false;
            })
        },
        setArrivaldateBtn(){
            this.saveLoading = true;
            inventorySetArrivalDate({type_no: this.typeNo, arrivaldate: this.arrivaldate, arrivaldate_title: this.arrivaldate_title}).then((res) => {
                this.saveLoading = false;
                if(res.code === 0){
                    this.$message.success("设置成功");
                    this.batchVisible = false;
                    this.getData();
                }else{
                    this.$message.error(res.msg);
                }
            }).catch(()=>{
                this.saveLoading = false;
            })
        },
        getExcelFileBtn(){
            this.downloading = true;
            inventoryExcelList().then((res) =>{
                this.downloading = false;
                this.excelFile = res.data.data;
                this.exportCache = res.data.cache;
                this.exportVisible = true;
                if(this.exportCache.file && this.exportCache.process<100){
                    this.loopExportCache();
                }
            }).catch(()=>{
                this.downloading = false;
            })
        },
        exportCloseBtn(){
            clearTimeout(this.exportTimeout);
            this.exportTimeout = null;
            this.exportVisible = false;
        },
        loopExportCache(){
            let that = this;
            inventoryExportCache().then((res) =>{
                if(res.data.file && res.data.process<100){
                    this.exportCache = res.data;
                    this.exportTimeout = setTimeout(function (){
                         that.loopExportCache();
                    },2000)
                }else{
                    this.exportCache = {};
                }
            })
        },
        exportDataBtn(){
            this.$confirm(`根据当前查询条件,共${this.total}条数据，添加导出计划, 确定继续?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                inventoryExportData(this.form).then((res) =>{
                    if(res.code === 0){
                        this.$message.success("计划已添加");
                        this.getExcelFileBtn();
                    }else{
                        this.$message.error(res.msg);
                    }
                })
            }).catch(() => {});
        },
        downloadBtn(name){
            window.open('/api/tool/fileExport'+`?path=cache/inventory&type=file&name=${name}`, '_self');
        },

        //下载模板
        downloadFile(name){
            window.open('/api/tool/fileExport'+`?path=template&type=file&name=${name}`, '_self');
        },
        uploadSuccessHandle(res){
            if(res.code === 0){
                this.$message.success("导入成功");
                this.batchVisible = false;
                this.getData();
            }else{
                this.$message.error(res.msg);
            }
        },
        beforeUpload(file) {
            if(!/\.xlsx/.test(file.name)){
                this.$message.error('上传图片只能是 xlsx格式, 请下载导入示例模板!');
                return false;
            }
            this.uploadHeaders.Authorization = 'Bearer '+ getToken();
            return true;
        },
    },
    mounted() {
        this.searchBtn();
    }
}
</script>

<style scoped>
.el-image /deep/ .el-icon-circle-close:before{
    color: white;
}
</style>
